<template>
  <div class="image-upload-view">

    <div class="image-view">

      <el-upload
        v-if="!disabled || data.url"
        class="avatar-uploader"
        action="http://up-z0.qiniup.com"
        :data="qnFileData"
        :disabled="disabled"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <div class="img-container">

          <img
            v-if="data.url"
            :src="data.url"
            class="avatar"
          >
          <el-icon
            v-else
            class="avatar-uploader-icon"
          >
            <plus />
          </el-icon>
          <div
            v-if="data.url"
            class="btn-view"
          >

            <el-icon
              v-if="!disabled"
              size="20"
              color="#191a23"
              @click.stop="onDelete"
            >
              <delete-filled />
            </el-icon>

            <div
              v-else
              style="width: 100px;display: flex;justify-content: space-between"
            >
              <el-icon
                size="20"
                color="#191a23"
                @click.stop="onCheck"
              >
                <ZoomIn />
              </el-icon>

              <el-icon
                size="20"
                color="#191a23"
                @click.stop="onUpload"
              >
                <Download />
              </el-icon>
            </div>

          </div>
        </div>

      </el-upload>

      <div v-else class="no-image" />

    </div>

    <div class="item-info">
      <div
        v-if="isTitle"
        class="file-name"
      >
        <span
          v-if="data.isNeed && !disabled"
          class="is-need"
        >*</span><span>{{ data.name }}</span>
      </div>
      <div v-if="!disabled || data.url" class="el-form-container">
        <el-form
          ref="ruleForm"
          :model="data"
          :rules="rules"
        >
          <el-row>
            <el-form-item
              style="margin-bottom: 5px;"
              :label="disabled?'证件编号':''"
              :prop="data.isNeed ? disabled? '' : 'code' : ''"
            >
              <el-input
                v-if="!disabled"
                v-model="data.code"
                size="small"
                placeholder="请输入证件编号"
              />

              <span v-else>{{ data.code }}</span>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item
              style="margin-bottom: 0px;"
              :label="disabled?'期限至':''"
              :prop="data.isLong ? '' : disabled ? '' : 'validTime'"
            >

              <div
                v-if="!disabled"
                style="display: flex"
              >
                <el-date-picker
                  v-if="data.isLong!==1"
                  v-model="data.validTime"
                  style="width: 100%;"
                  size="small"
                  type="date"
                  placeholder="有效期至"
                />
                <el-checkbox
                  v-if="isLong"
                  v-model="data.isLong"
                  :label="1"
                  :true-label="1"
                  :false-label="0"
                >长期</el-checkbox>
              </div>
              <div v-else>
                <span v-if="data.isLong">长期有效</span>
                <span v-else>{{ dateFormat('yyyy-mm-dd',data.validTime) }}</span>
              </div>

            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>

    <el-dialog v-model="dialogVisible">
      <img
        width="100%"
        :src="data.url"
        alt
        style="width: 100%;height: 100%"
      >
    </el-dialog>

  </div>
</template>

<script>
import {DeleteFilled, Download, Plus, ZoomIn} from '@element-plus/icons'
import {defineComponent, getCurrentInstance, inject, ref} from 'vue'

export default defineComponent({
  name: 'Index',
  components: {
    Plus,
    DeleteFilled,
    ZoomIn,
    Download,
  },
  props: {
    data: {
      type: Object,
      default: {},
    },
    isTitle: {
      type: Boolean,
      default: true,
    },
    isLong: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    isToast: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const currentInstance = getCurrentInstance()
    const QNSrcHeader = import.meta.env.VITE_CRM_QINIU_URL
    const api = inject('api')
    const rules = ref({
      code: [
        {
          required: true,
          message: '请输入证件编号',
          trigger: 'blur',
        },
      ],
      validTime: [
        {
          type: 'date',
          required: true,
          message: '请选择有效期',
          trigger: 'change',
        },
      ],
    })
    var dialogVisible = ref(false)
    var ruleForm = ref(null)
    var qnFileData = ref({
      token: '',
    })

    const handleAvatarSuccess = (res, file) => {
      // props.data.url = URL.createObjectURL(file.raw)
      props.data.url = QNSrcHeader + res.hash + '?attname=' + props.data.imgName
      context.emit('success', props.data)
    }

    const QNTokenRequestFun = () => {
      return api.common.GET_QINIU_TOKEN().then((res) => {
        if (!res.code) qnFileData.value.token = res.data
      })
    }

    const beforeAvatarUpload = async(file) => {
      const isJPG = file.type === 'image/jpeg'
      const isJPG1 = file.type === 'image/jpg'
      const isPNG = file.type === 'image/png'
      const isLt5M = file.size / 1024 / 1024 < 5
      console.log(file.name)
      props.data.imgName = file.name

      if (!isJPG && !isJPG1 && !isPNG) {
        currentInstance.proxy.customMessage({
          type: 'error',
          message: '请添加jpeg、jpg或png格式的图片',
        })
        return Promise.reject(false)
      }
      if (!isLt5M) {
        currentInstance.proxy.customMessage({
          type: 'error',
          message: '请添加不超过5MB大小图片',
        })
        return Promise.reject(false)
      }
      await QNTokenRequestFun()

      return (isJPG || isJPG1 || isPNG) && isLt5M
    }

    const onDelete = () => {
      props.data.url = ''
      context.emit('delete', props.data)
    }

    const validateImage = () => {
      let bo = true
      let msg = ''
      // ruleForm.value.validate((val)=>{
      //   if (val){
      //
      //   }
      //   bo =val
      // })
      if (props.data.isNeed) {
        if (!props.data.url) {
          bo = false
          msg = '请添加' + props.data.name
        }
      }

      if (props.data.url) {
        if (!props.data.code) {
          bo = false
          msg = '请输入' + props.data.name + '的编号'
        } else if (!props.data.isLong && !props.data.validTime) {
          bo = false
          msg = '请选择' + props.data.name + '的有效期'
        }
      }

      if (!bo && props.isToast) {
        currentInstance.proxy.customMessage({
          type: 'error',
          message: msg,
        })
      }

      return msg
    }

    const onCheck = () => {
      dialogVisible.value = true
    }

    const onUpload = () => {
      window.location.href = props.data.url
    }

    return {
      QNSrcHeader,
      qnFileData,
      rules,
      ruleForm,
      dialogVisible,

      onDelete,
      handleAvatarSuccess,
      beforeAvatarUpload,
      validateImage,
      onCheck,
      onUpload,
    }
  },
})
</script>

<style lang="scss" scoped>
  @import "@CRM/assets/scss/components/imageUploadView.scss";
</style>
